<template>
    <div style="min-width:1155px">
    <div v-if="$route.path == '/order'">
        <div class="vs-search-box">
            <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                <el-form-item label="门店：">
                    <el-select v-model="paging.store_id" style="width:250px" placeholder="请选择">
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="顾客姓名：">
                    <el-input style="width:250px" placeholder="支持任意关键字搜索" v-model="paging.username"></el-input>
                </el-form-item>
                <el-form-item label="" class="vs-right-btns">
                    <el-button @click="reset">重置</el-button>
                    <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                </el-form-item>
                <el-form-item label="手机号码：">
                    <el-input style="width:250px" placeholder="支持手机尾号4位搜索" v-model="paging.phone"></el-input>
                </el-form-item>
                <el-form-item label="订单编号：">
                    <el-input style="width:250px" placeholder="支持订单后4位搜索" v-model="paging.out_trade_no"></el-input>
                </el-form-item>
                
                <el-form-item label="房间号：">
                    <el-input style="width:250px" placeholder="" v-model="paging.room"></el-input>
                </el-form-item>
                <el-form-item label="床位号：">
                    <el-input style="width:250px" placeholder="" v-model="paging.bed"></el-input>
                </el-form-item>
                <el-form-item label="服务技师：">
                    <el-input style="width:250px" placeholder="" v-model="paging.staff_id"></el-input>
                </el-form-item>
                <el-form-item label="开单日期：">
                    <el-date-picker 
                    style="width:250px" 
                    range-separator="至"
                    v-model="paging.bill_date_start" 
                    value-format="yyyy-MM-dd"
                    type="daterange" placeholder="">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="开单时间：">
                    <el-time-picker
                        is-range
                        style="width:250px"
                        v-model="paging.bill_time_start"
                        range-separator="至"
                        arrow-control
                        value-format="HH:mm:ss"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="">
                    </el-time-picker>
                </el-form-item>
                <el-form-item label="预约方式：">
                    <el-select style="width:250px" clearable v-model="paging.mode" placeholder="请选择">
                        <el-option label="大众点评" value="0"> </el-option>
                        <el-option label="小程序" value="1"> </el-option>
                        <el-option label="电话" value="2"> </el-option>
                        <el-option label="我的管家" value="3"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目名称：">
                    <el-input style="width:250px" v-model="paging.project_name"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="vs-table-box">
            <div class="operation-box clear-float">
                <!-- <el-button @click="utils.goUrl('/orderInfo')" style="margin-left:auto;" type="primary">创建订单</el-button> -->
                <!-- <el-button @click="openInfo" type="primary">待消费</el-button> -->
                <el-button style="margin-left:auto;" icon="el-icon-download" :loading="isDerive" @click="derive">导出</el-button>
            </div>
            <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                <el-table-column prop="out_trade_no" label="订单编号" min-width="170"></el-table-column>
                <el-table-column prop="bill_date" label="开单日期" width="100">
                    <template slot-scope="scope">
                        {{scope.row.create_time | parseTime('{y}-{m}-{d}')}}
                    </template>
                </el-table-column>
                <el-table-column prop="bill_time" label="开单时间" width="80">
                    <template slot-scope="scope">
                        {{scope.row.create_time | parseTime('{h}:{i}:{s}')}}
                    </template>
                </el-table-column>
                <el-table-column label="项目名称" min-width="130">
                    <template slot-scope="scope">
                        <span >{{scope.row.projectOne.project_name}}</span> 
                    </template>
                </el-table-column>
                <el-table-column label="服务技师" min-width="130">
                    <template slot-scope="scope" v-if="scope.row.projectOne.staff">
                        {{scope.row.projectOne.staff.name}}（{{scope.row.projectOne.staff.number}}）
                    </template>
                </el-table-column>
                <el-table-column label="排钟类型">
                    <template slot-scope="scope">
                    {{scope.row.projectOne.staff_type | staffType}}
                     </template>
                </el-table-column>
                <el-table-column label="房间号">
                    <template slot-scope="scope" v-if="scope.row.projectOne.room">
                    {{scope.row.projectOne.room.room_number}}
                     </template>
                </el-table-column>
                <el-table-column label="床位号">
                    <template slot-scope="scope" v-if="scope.row.projectOne.bed">
                    {{scope.row.projectOne.bed.number}}
                     </template>
                </el-table-column>
                <el-table-column label="顾客姓名" min-width="130">
                    <template slot-scope="scope" v-if="scope.row.user">
                    {{scope.row.user.username }}
                    </template>
                </el-table-column>
                <el-table-column label="手机号" min-width="110">
                    <template slot-scope="scope" v-if="scope.row.user">
                    {{scope.row.user.phone }}
                     </template>
                </el-table-column>
                <el-table-column label="预约方式">
                    <template slot-scope="scope">
                    <span v-if="scope.row.reserve">
                        {{scope.row.reserve.mode | typeMode}}
                    </span>
                    <span v-else>到店</span>
                     </template>
                </el-table-column>
                <el-table-column label="预付金额">
                    <template slot-scope="scope">
                        {{scope.row.advance_amount}}
                     </template>
                </el-table-column>
                <el-table-column label="订单总额（元）">
                    <template slot-scope="scope">
                    {{scope.row.orders_payable }}
                     </template>
                </el-table-column>
                <el-table-column label="备注" >
                    <template slot-scope="scope">
                        <span v-if="scope.row.reserve" :title="scope.row.reserve.remark" class="line-1">
                            {{scope.row.reserve.remark}}
                        </span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="订单状态">
                    {{scope.row.projectOne.return_status | orderType}}
                </el-table-column>
                 -->
                <el-table-column fixed="right" width="80" label="操作"> 
                    <template slot-scope="scope">
                        <span @click="setRow(1,scope.row)" class="tab-table-text">详情</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="vs-paging-box">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="paging.page"
                    :page-size="paging.limit"
                    layout="sizes,prev, pager, next, jumper"
                    :total="paging.total">
                </el-pagination>
            </div>
        </div>
    </div>
        <router-view></router-view>
    <el-dialog
    title="分销记录"
    :visible.sync="isInfo"
    >
    <!-- width="570px" -->
        <el-table :data="recordList" v-loading="loading2" header-row-class-name="has-gutter-table" style="width: 100%">
            <el-table-column prop="company.title" label="公司名称" > </el-table-column>
            <el-table-column prop="create_time" label="邀请时间" > </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="isInfo = false">确 定</el-button>
        </span>
    </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            recordList:[],
            loading:true,
            loading2:false,
            isBtn:false,
            isInfo:false,
            isDerive:false,
            dialogVisible:false,
            paging:{
                store_id:'',
                is_market:0,//1商场订单 0项目订单
                status:"1",//是否是已完成订单 传参：4
                username:'',//顾客姓名
                phone:'',//手机号
                out_trade_no:"",//订单编号
                room:'',//房间id
                bed:'',//床位id
                staff_id:'',//技师id
                mode:'',//预约方式 0大众点评 1小程序 2电话 3我的管家
                project_name:'',//项目名称
                bill_date_start:'',//开单日期 开始
                bill_date_end:'',//开单日期 结束
                bill_time_start:'',//开单时间 开始
                bill_time_end:'',//开单时间 结束
                page:1,
                total:0,
                limit:10,
            },
            
            form: {
                date: "",
            },
            shopList:[],
            tableData: []
        };
    },
    created() {
        if(this.$route.path == '/order'){
            this.homegetStore();
        }
    },
    methods: {
        async derive(){
            let obj = Object.assign({},this.paging);
            if(obj.bill_date_start&&obj.bill_date_start.length){
                obj.bill_date_end = obj.bill_date_start[1];
                obj.bill_date_start = obj.bill_date_start[0];
            }else{
                obj.bill_date_end = '';
                obj.bill_date_start = '';
            }
            if(obj.bill_time_start&&obj.bill_time_start.length){
                obj.bill_time_end = obj.bill_time_start[1];
                obj.bill_time_start = obj.bill_time_start[0];

            }else{
                obj.bill_time_end = "";
                obj.bill_time_start = "";
            }
            this.isDerive = true;
            let res = await this.$Http.exportOrders(obj);
            this.utils.downloadXlsx(res,'订单')
            this.isDerive = false;
        },
        async homegetStore(){
            let {code,data} = await this.$Http.homegetStore();
            if(code){
                // this.paging.store_id = data[0].id;
                this.shopList = data;
                this.handleCurrentChange(1);
            }
        },
        openInfo() {
            this.$prompt('请输入核验码', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^\d+$/,
            inputErrorMessage: '核验码格式不正确',
            beforeClose:async (action, instance, done) => {
                if (action === 'confirm') {
                instance.confirmButtonLoading = true;
                instance.confirmButtonText = '执行中...';
                let {code,data} = await this.$Http.checkOrder({check_code:instance.inputValue})
                    if(code){
                        this.$message.success('提交成功!');
                        this.handleCurrentChange(1)
                    }
                    done();
                    instance.confirmButtonLoading = false;
                } else {
                    done();
                }
            }
            }).then(({ value }) => {
            }).catch(() => {
            });
        },
        async setRow(type,row){
            if(type==1){
                this.utils.goUrl(`/orderInfo?title=订单详情&type=2&id=${row.id}&store_id=${row.store_id}`)
            }else if(type==2){
                this.utils.goUrl('/orderInfo?title=订单编辑&type=3&id='+row.id)
            }else {
                // this.utils.goUrl('/orderInfo?title=订单结账&type=4&id='+row.id)
                this.utils.goUrl('/settle?id='+row.id)
            }
        },
        handleClose(dom){
            this.$refs['ruleForm'].resetFields();
            this.dialogVisible = false;
            dom&&dom();
        },
        async repairGetList(){
            let obj = Object.assign({},this.paging);
            if(obj.bill_date_start&&obj.bill_date_start.length){
                obj.bill_date_end = obj.bill_date_start[1];
                obj.bill_date_start = obj.bill_date_start[0];
            }else{
                obj.bill_date_end = '';
                obj.bill_date_start = '';
            }
            if(obj.bill_time_start&&obj.bill_time_start.length){
                obj.bill_time_end = obj.bill_time_start[1];
                obj.bill_time_start = obj.bill_time_start[0];

            }else{
                obj.bill_time_end = "";
                obj.bill_time_start = "";
            }

            this.loading = true;
            let {code,data} = await this.$Http.ordersgetOrders(obj);
            this.loading = false;
            if(code){
                data.data.forEach(v=>{
                    v.projectOne = v.project.length?v.project[0]:{};
                })
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset(){//重置
            this.paging = this.$options.data().paging;
            // this.paging.store_id = this.shopList[0].id;
            this.form.date = '';
            this.handleCurrentChange(1)
        },
        handleSizeChange(val){
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val){
            this.paging.page = val;
            this.repairGetList()
        }
    },
};
</script>

<style lang="scss" scoped>

.image-thumbnail{
    width: 130px;
    height: 130px;
}
</style>